<template>
	<!-- 新建字段 -->
	<el-dialog :title="action+'字段'" :visible.sync="fieldFormVisible" :showClose="showClose" center width="40%">
	  <el-form :model="form" :rules="fieldRules">
	    <el-form-item label="名称" :label-width="formLabelWidth" prop="ch_name">
	      <el-input v-model="form.ch_name"></el-input>
	    </el-form-item>
	    <el-form-item label="唯一标识" :label-width="formLabelWidth" prop="en_name">
	      <el-input v-model="form.en_name"></el-input>
	    </el-form-item>
	    <el-form-item label="字段类型" :label-width="formLabelWidth" prop="type">
	      <el-select v-model="form.type" placeholder="请选择字段类型" @change="selectType">
	        <el-option 
	        	:label="type.ch_name" 
	        	:value="type.id" 
	        	v-for="(type,index) in types" :key="index">
	        	</el-option>
	      </el-select>
	    </el-form-item>
	    <el-form-item label="显示顺序" :label-width="formLabelWidth" prop="order">
	      <el-input v-model="form.order" type="number"></el-input>
	    </el-form-item>
	    <el-form-item label="" :label-width="formLabelWidth" v-show="show">
	    	<table class="my_table">
    			<tr>
    				<th>枚举ID</th><th>值</th><th>操作</th>
    			</tr>
    			<tr v-for="n in enum_total">
            <td><input v-model="form.enums_key['enum'+n]"></td>
            <td><input v-model="form.enums_value['enum'+n]"></td>
            <td>
              <i class="fa fa-plus" @click="addEnum" v-if="n==1"></i>
              <i class="fa fa-minus" @click="delEnum" v-else></i>
            </td>
          </tr>
	    	</table>
	    </el-form-item>
	    <el-form-item label="必填" :label-width="formLabelWidth">
	      <el-switch
				  v-model="form.must"
				  onClick="event.cancelBubble = true" :disabled="disabled">
				</el-switch>
	    </el-form-item>
	    <el-form-item label="显示" :label-width="formLabelWidth">
	      <el-switch
				  v-model="form.display"
				  onClick="event.cancelBubble = true">
				</el-switch>
	    </el-form-item>
	  </el-form>
	  <div slot="footer" class="dialog-footer">
	    <el-button @click="cancel">取 消</el-button>
	    <el-button type="primary" @click="save">确 定</el-button>
	  </div>
	</el-dialog>
</template>
<script>
import {getAPItokenRes,postAPItoken,putAPItoken} from '@/utils/api'
export default {
	data () {
		return {
			disabled: false,
			action: '添加',
			types: [],
			enum_total:1,
			show: false,
			showClose: false,
			fieldFormVisible: false,
			formLabelWidth: '80px',
			form: {
				template: this.$route.query.id,
				must: false,
				display: true,
				order: 1,
				enums_key:{
          enum1:null,
        },
        enums_value:{
          enum1:null,
        }
			},
			fieldRules: {
				ch_name: [
					{required: true, message: '请输入字段名称', trigger: 'blur'}
				],
				en_name: [
					{required: true, message: '请输入字段唯一标识', trigger: 'blur'}
				],
				type: [
					{required: true, message: '请选择字段类型', trigger: 'blur'}
				]
			}
		}
	},
	methods: {
		showForm (action,form) {
			this.action = action
			if(action == '编辑'){
				this.form = form
				form['enums_key'] = {}
				form['enums_value'] = {}
				if (form.type_name == '枚举'){
	        var enums_key = {}
	        var enums_value = {}
	        for(var i in form['field_type']){
	          var num = Number(i)+Number(1)
	          form['enums_key']['enum'+num] = form['field_type'][i]['key']
	          form['enums_value']['enum'+num] = form['field_type'][i]['value']
	        }
					this.enum_total = form['field_type'].length
	        this.show = true
      	} else {
      		this.show = false
      	}
			}
			this.fieldFormVisible = true
		},
		save () {
			if(this.action == '添加'){
        var promise = postAPItoken(API.tempField,this.form,this.$store.state.user.token)
      }else{
        var promise = putAPItoken(API.tempField+this.form.id+'/',this.form,this.$store.state.user.token);
      }
      promise.then((data)=>{
      	console.log(data)
      	if(data.status){
      		this.$parent.getFields()
	        this.$notify({
		        title: '成功',
		        message: '字段:'+this.form.ch_name+', '+this.action+'成功',
		        type: 'success'
		      })
      	}else{
      		this.$notify({
		        title: '失败',
		        message: data.message,
		        type: 'error'
		      })
      	}
        
      })
		},
		cancel () {
			this.fieldFormVisible = false
		},
		addEnum () {
      this.enum_total++;
      //添加enums_key
      this.form['enums_key']['enum'+this.enum_total]=null;
      this.form['enums_value']['enum'+this.enum_total]=null;
    },
    delEnum () {
      //删除enums_key
      delete this.form['enums_key']['enum'+this.enum_total]
      delete this.form['enums_value']['enum'+this.enum_total]
      this.enum_total--;
    },
		getFieldTypes () {
			const promise = getAPItokenRes(API.fieldType,this.$store.state.user.token)
			promise.then((res)=>{
				if (res.status == 200) {
					this.types = res.data
				}
			})
		},
		selectType () {
			var exclude_field = ['file','image']
			for(var i in this.types){
        if(this.types[i].id == this.form.type){
        	if(exclude_field.indexOf(this.types[i].en_name) > -1){
        		this.form.must = false
        		this.disabled = true
        	}else{
        		this.disabled = false
        	}
        	if(this.types[i].en_name == 'enum'){
		        this.show = true
		      }else{
		        this.show = false
		      }

        }
      }
    }
	},
	mounted () {
		this.getFieldTypes()
	}
}
</script>
<style scoped>
.el-select {
	width: 100%;
}
.my_table {
	border: 1px solid #ddd;
	width: 100%;
	border-collapse: collapse;
}
.my_table td,.my_table th{
	border: 1px solid #ddd;
	text-align: center;
	padding: 0px;
	line-height: 25px;
}
input {
	line-height: 20px;
	width: 98%;
	border: 0px;
	text-align: center;
}
</style>